<template>
  <div>
    <div>
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        增加
      </el-button>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="id" prop="id" sortable="custom" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <!--<el-table-column-->
        <!--label="用户昵称"-->
        <!--prop="name"-->
        <!--sortable="custom"-->
        <!--align="center"-->
        <!--width="80"-->
      <!--&gt;-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.shopCarUser.name }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->

      <!--<el-table-column-->
        <!--label="商品名称"-->
        <!--prop=""-->
        <!--sortable="custom"-->
        <!--align="center"-->
        <!--width="120"-->
      <!--&gt;-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.goods.productname }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->

      <!--<el-table-column-->
        <!--label="商品图片"-->
        <!--prop="pic"-->
        <!--sortable="custom"-->
        <!--align="center"-->
        <!--width="180"-->
      <!--&gt;-->
        <!--<template slot-scope="scope">-->
          <!--<img width="80" :src="scope.row.shopCarProduct.pic">-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--label="商品价格"-->
        <!--prop="price"-->
        <!--sortable="custom"-->
        <!--align="center"-->
        <!--width="80"-->
      <!--&gt;-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.shopCarProduct.price }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->

      <el-table-column
        label="商品数量"
        prop="count"
        sortable="custom"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.count }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商品总价"
        prop="totalPrice"
        sortable="custom"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.totalPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="日期"
        prop="createDate"
        sortable="custom"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button
            v-if="row.status!='deleted'"
            size="mini"
            type="danger"
            @click="handleDel(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
    >
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>

<script>
  import $ from 'jquery'
  import ajax from '@/utils/baseurl'
  import Pagination from '@/components/Pagination'
  import waves from '@/directive/waves'

  var p;
  export default {

    name: 'Driver',
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        temp: {
          createDate: '',
          count: '',
          price: '',
          id: '',
          totalPrice:''
        },
        rules: {
          // name: [{ required: true, message: '驾驶员信息不能为空', trigger: 'change' }],
          // tel: [{ required: true, message: '手机信息不能为空', trigger: 'change' },
          //   { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '号码不规范'
          //   }],
          // pwd: [{ required: true, message: '密码不能为空', trigger: 'change' }],
          // company: [{ required: true, message: '公司名称不能为空', trigger: 'change' }]
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '新增'
        },
        listQuery: {
          page: 1,
          limit: 10,
          sort: '+id'
        },
        total: 0,
        tableKey: 0,
        listLoading: true,
        list: null
      }
    },
    created() {
      p = this;
      // console.log(ajax);
      this.getList()
    },
    methods: {
      updateData() {
        this.createData()
      },
      resetTemp() {
        this.temp = {
          name: '',
          tel: '',
          company: '',
          pwd: ''
        }
      },
      createData() {
        // var p = this
        // this.$refs['dataForm'].validate((valid) => {
        //   if (valid) {
        //     ajax('shopCar/add', this.temp, function(data) {
        //       if (data.id) {
        //         p.dialogFormVisible = false
        //         p.getList()
        //         p.$notify({
        //           title: '完成',
        //           message: p.dialogStatus == 'create' ? '新增成功' : '修改成功',
        //           type: 'success',
        //           duration: 2000
        //         })
        //       }
        //     })
        //   }
        // })
      },
      handleCreate() {
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        // this.temp = Object.assign({}, row);
        // this.dialogStatus = 'update';
        // this.dialogFormVisible = true;
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].clearValidate()
        // })
      },
      handleDel(row) {
        var p = this;
        this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax('delShopCar', { id: row.id }, function(data) {
            if (data) {
              p.getList();
              p.$message({
                type: 'success',
                message: '删除成功!'

              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      getList() {
        this.listLoading = true;
        ajax('shopcar/findAll', this.listQuery, function(data) {
          data = JSON.parse(data);
          console.log(data);
          p.list=data.page.list;
          p.total=data.page.totalCount;
          p.listLoading = false
        })
      }

    }
  }
</script>

